import React from 'react'
import './self_software.module.scss'
import { connect } from 'react-redux';
import { switch_loading } from '../../actions/index';
import { userProps } from '../../interface/user'
import { RouteComponentProps  } from 'react-router-dom'
import { Form, Button, DatePicker, Select, Table, Pagination, message } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN'
import { selfSoftwareList, softWareSelectList, selfSoftwareListExport } from '../../server/api'
import { softwareListItem } from '../../interface/common'
import { 
  PAGE_SIZE, 
  // DATE_FORMAT 
} from '../../config/config'
// import moment from 'moment'

const { Option } = Select;
const { RangePicker } = DatePicker;
interface Props {
  user: userProps,
  isShowLoading: Boolean,
  dispatch: Function
}

class SelfSoftware extends React.Component<RouteComponentProps & Props> {

  state = {
    pageno: 1,
    pagesize: PAGE_SIZE,
    startTime: 0,
    endTime: 0,
    type: '全部',
    total: 0,
    list: [],
    softwareList: [],
    exportParam: {}
  }

  componentDidMount () {
    this.getSelectList()
  }

  private handleSubmit () {
    this.setState({
      pageno: 1,
      list: []
    })
    this.getList()
  }

  async getSelectList () {
    let params = {
      xx: new Date().getTime()
    }
    let res = await softWareSelectList(params)
    let softwareList = [{id: 0, name: '全部'}]
    softwareList.push(...res.info)
    if (res.success === 'true') {
      this.setState({
        softwareList,
        type: softwareList[0].name
      }, () => {
        this.getList()
      })
    } else {
      message.error(res.msg)
    }
  }

  private async getList () {
    let type: number = 0
    this.state.softwareList.forEach((item: softwareListItem) => {
      if (item.name === this.state.type) {
        type = item.id
      }
    })
    let params = {
      pageno: this.state.pageno,
      pagesize: this.state.pagesize,
      pageNo: this.state.pageno,
      pageSize: this.state.pagesize,
      startTime: this.state.startTime,
      endTime: this.state.endTime,
      type
    }
    if (params.pageno  === 1) {
      this.setState({
        exportParam: params
      })
    }
    this.props.dispatch(switch_loading({show: true}))
    let res = await selfSoftwareList(params)
    this.props.dispatch(switch_loading({show: false}))
	if (!res.info.recordList) return
    if (res.success === 'true') {
      res.info.recordList.forEach((item: any, index: number) => {
        item.key = index
        // this.state.vmTypeList.forEach(vmType => {
        //   if (item.vmType * 1 === vmType.dictionarykey * 1) {
        //     item.vmTypeName = vmType.dictionaryvalue
        //   }
        // })
      })
      this.setState({
        total: res.info.count,
        list: res.info.recordList
      })
    } else {
      message.error(res.msg)
    }
  }

  private onDateChange (date: any) {
    this.setState({
      startTime: date.length > 0 ? new Date(date[0].format('YYYY/MM/DD') + ' 00:00:00').getTime() : 0,
      endTime: date.length > 0 ? new Date(date[1].format('YYYY/MM/DD') + ' 00:00:00').getTime() : 0
    })
  }

  private sourceChange (type: any) {
    this.setState({
      type
    })
  }

  private pageinChange (pageno: number) {
    this.setState({
      pageno
    }, () => {
      this.getList()
    })
  }

  private showSizeChange (current: number, pagesize: number) {
    this.setState({
      pageno: 1,
      pagesize
    }, () => {
      this.getList()
    })
  }

  private async exportList () {
    await selfSoftwareListExport(this.state.exportParam)
  }

  render () {
    const { list, pageno, total, softwareList, pagesize, type } = this.state
    const columns = [
      {
        title: '时间',
        dataIndex: 'installDate',
        key: 'installDate',
        // eslint-disable-next-line
        // render: (text: string) => <a>{text}</a>,
      },
      {
        title: '软件名称',
        dataIndex: 'softwareName',
        key: 'softwareName',
      },
      {
        title: '安装次数',
        dataIndex: 'installCount',
        key: 'installCount',
      },
      // {
      //   title: '使用次数',
      //   dataIndex: 'useCount',
      //   key: 'useCount',
      // },
      
      // {
      //   title: '使用人数',
      //   dataIndex: 'userCount',
      //   key: 'userCount',
      // }
    ];
    return (
      <div className='user-duration page'>
        <Form layout="inline" onSubmit={this.handleSubmit.bind(this)} className='search'>
          <Form.Item label="时间段">
            <RangePicker locale={locale} onChange={this.onDateChange.bind(this)} placeholder={['开始时间', '结束时间']} format='YYYY-MM-DD'/>
          </Form.Item>
          <Form.Item label='软件名称'>
            <Select value={type} showSearch style={{ width: 120 }} onChange={this.sourceChange.bind(this)}>
              {
                softwareList.map((item: softwareListItem) => {
                  return <Option key={item.id} value={item.name}>{item.name}</Option>
                })
              }
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary"  onClick={this.handleSubmit.bind(this)}>
              搜索
            </Button>
            <Button type="primary" onClick={this.exportList.bind(this)} className='export-btn'>
              导出
            </Button>
          </Form.Item>
        </Form>
        <Table className='table' columns={columns} dataSource={list} pagination={false}/>
        <Pagination className='pagination' current={pageno} total={ total } onShowSizeChange={this.showSizeChange.bind(this)}  onChange={this.pageinChange.bind(this)} pageSize={pagesize} showSizeChanger showQuickJumper showTotal={() => { return `共${total}条数据`}} />
      </div>
    )
  }
}

interface stateType {
  user: userProps,
  isShowLoading: Boolean
}

export default connect(
  (state: stateType) => ({
    user: state.user,
    isShowLoading: state.isShowLoading
  })
)(SelfSoftware)